<template>
	<div class="progressBox">
		<div class="continueTime">{{(currentTime/60).toFixed(2)}}</div>
		<div class="lyricBox">
			<p class="lyricText" v-for="(item,index) in playlyric">{{item}}</p>
		</div>
		<div class="vesselBox" @touchmove="proMove">
			<div class="progress" :style="{width:calculate}">
				<div class="ball"></div>
			</div>
		</div>
		<div class="totalTime">{{(currentDuration/60).toFixed(2)}}</div>
	</div>
</template>

<script>
	import {mapState} from "vuex";
	export default{
		data(){
			return{
				
			}
		},
		
		methods:{
			proMove(event){
				let touchPageX = event.changedTouches[0].pageX;
				let selfLeft = event.currentTarget.offsetLeft;
				let selfwidth = event.currentTarget.offsetWidth;
				let percent = (touchPageX-selfLeft)/selfwidth
				// console.log((touchPageX-selfLeft)/selfwidth)
				if(percent>0.99){
					percent = 0.99
				}
				this.audio.currentTime = percent*this.currentDuration;
			}
		},
		computed:{
			...mapState([
				'currentTime',
				'currentDuration'
			]),
			calculate(){
				return (this.currentTime/this.currentDuration)*100+'%'
			},
			playlyric(){
				return this.$store.state.playLyric
			}
		},
	}
</script>

<style lang="scss" scoped>
	.progressBox{
		.continueTime{
			position: fixed;
			left: 7px;
			bottom: 21.3%;
			color: white;
			font-size: 13px;
		}
		.totalTime{
			position: fixed;
			right: 7px;
			bottom: 21.4%;
			color: white;
			font-size: 13px;
		}
		.lyricBox{
			width: 100%;
			height: 13%;
			position: fixed;
			left: 0;
			bottom: 32%;
			color: white;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.vesselBox{
			position: fixed;
			left: 12.5%;
			bottom: 22%;
			width: 75%;
			height: 1%;
			border: 1px solid gray;
			background: gainsboro;
			border-radius: 50px;
			.progress{
				height: 5px;
				background-color: gray;
				position: relative;
				.ball{
					width: 12px;
					height: 12px;
					border-radius: 50%;
					border: 1px solid white;
					background-color: white;
					position: absolute;
					right: -5px;
					top:-3px;
				}
			}
		}
	}
</style>
